<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Transition</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <!-- styles -->
    <link rel="stylesheet" href="../../css/global.css"/>
    <link rel="stylesheet" href="css/google-code-prettify.css"/>
    <link rel="stylesheet" href="css/style.css"/>
    <link rel="stylesheet" href="css/transition.css"/>

    <!--[if lt IE 9]>
    <script src="../../lib/js/html5.js"></script>
    <![endif]-->

    <!-- icons -->
    <link rel="icon" href="../../lib/image/favicon.ico"/>
    <link rel="shortcut icon" href="../../lib/image/favicon.ico"/>

</head>
<body>
<nav class="navbar">
    <div class="inner">
        <ul class="nav">
            <li>
                <a href="./index.html">Home</a>
            </li>
            <li>
                <a href="./transform.html">Transform</a>
            </li>
            <li class="active">
                <a href="./transition.html">Transition</a>
            </li>
            <li>
                <a href="./animation.html">Animation</a>
            </li>
            <!--<li>-->
                <!--<a href="events.html">Events</a>-->
            <!--</li>-->
            <!--<li>-->
            <!--<a href="./script/">Script</a>-->
            <!--</li>-->
        </ul>
        <a class="brand" href="../../">Nicole_Site</a>
    </div>
</nav>
<header class="overview subov">
    <div class="inner">
        <h1>CSS3 Transition</h1>
        <p>定义和移动一个元素从它的静止状态到它的hover或者激活状态，转换可以和变形同时使用以创建一些动画。</p>
    </div>
</header>
<div class="container">
    <div class="inner clearfix">
        <aside class="span2">
            <div class="aside">
                <ul class="aside-nav">
                    <li class="cur"><a href="#transition"><i class="icon-chevron-right"></i>transition</a></li>
                    <li><a href="#property"><i class="icon-chevron-right"></i>property</a></li>
                    <li><a href="#duration"><i class="icon-chevron-right"></i>duration</a></li>
                    <li><a href="#timeFunc"><i class="icon-chevron-right"></i>timing function</a></li>
                    <li><a href="#delay"><i class="icon-chevron-right"></i>delay</a></li>
                    <li><a href="#propertySupport"><i class="icon-chevron-right"></i>Property Support</a></li>

                </ul>
            </div>
        </aside>
        <article class="span3">
            <section id="transition">
                <header class="page-header">
                    <h1>transition</h1>
                    <div class="explain">
                        <p>复合属性。检索或设置对象变换时的过渡。</p>
                        <p>可以为同一元素的多个属性定义过渡效果。</p>
                        <p>对应的脚本特性为transition。</p>
                    </div>
                    <div class="syntax">
                        <p>transition：[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]</p>
                    </div>
                </header>
                <div class="example">
                    <div class="transi transi-all">
                        <!--<div class="node node-brown"> </div>-->
                        <div class="node node-purple all-1">background-color, border-color, color</div>
                        <div class="node node-blue all-2">width, height, line-height</div>
                        <div class="node node-green all-3">margin-left, margin-right, margin-top, margin-bottom</div>
                        <div class="node node-yellow all-4">padding-left</div>
                        <div class="node node-orange all-5">opacity</div>
                        <div class="node node-red all-6">font-size, font-weight</div>
                    </div>
                </div>
                <pre class="prettyprint linenums sign">
/* 设置参与过渡的属性为 all, 持续时间为 .5s, 运动算法为 ease-in-out,延迟过渡的时间为 0. */
                -webkit-transition: all .5s ease-in-out;
                   -moz-transition: all .5s ease-in-out;
                    -ms-transition: all .5s ease-in-out;
                     -o-transition: all .5s ease-in-out;
                        transition: all .5s ease-in-out;
</pre>
            </section>
            <section id="property">
                <header class="page-header">
                    <h1>property</h1>
                    <div class="explain">
                        <p>检索或设置对象中的参与过渡的属性。</p>
                        <p>如果提供多个属性值，以逗号进行分隔。</p>
                        <p>对应的脚本特性为transitionProperty。</p>
                        <p>默认值为：all。默认为所有可以进行过渡的css属性。</p>
                    </div>
                    <div class="syntax"><p>transition-property：all | none | &lt;property&gt;[ ,&lt;property&gt; ]* </p></div>
                </header>
                <div class="example">
                    <div class="transi transi-property node-duration">
                        <!--<div class="node node-brown"> </div>-->
                        <div class="node node-purple property-1">background-color, border-color, color</div>
                        <div class="node node-blue property-2">width, height, line-height</div>
                        <div class="node node-green property-3">margin-left, margin-right, margin-top, margin-bottom</div>
                        <div class="node node-yellow property-4">padding-left</div>
                        <div class="node node-orange property-5">opacity</div>
                        <div class="node node-red property-6">font-size, font-weight</div>
                    </div>
                </div>
                <pre class="prettyprint linenums sign">
/* 设置参与过渡的属性分别为 background-color, border-color, color, width, height,<br> line-height, margin, padding, opacity, font-size, font-weight */
-webkit-transition-property: color, opacity, width, padding, background-color; //省略
   -moz-transition-property: color, opacity, width, padding, background-color; //省略
    -ms-transition-property: color, opacity, width, padding, background-color; //省略
     -o-transition-property: color, opacity, width, padding, background-color; //省略
        transition-property: color, opacity, width, padding, background-color; //省略</pre>
            </section>
            <section id="duration">
                <header class="page-header">
                    <h1>duration</h1>
                    <div class="explain">
                        <p>检索或设置对象过渡的持续时间。</p>
                        <p>如果提供多个属性值，以逗号进行分隔。</p>
                        <p>对应的脚本特性为transitionDuration。</p>
                        <p>默认值：0。</p>
                    </div>
                    <div class="syntax"><p>transition-duration：&lt;time&gt;[ ,&lt;time&gt; ]*</p></div>
                </header>
                <div class="alert yellow">通过设置相同的<code>transition-timing-function, transition-delay</code>，观察不同<code>transition-duration</code>的效果。</div>
                <div class="example">
                    <div class="transi transi-duration">
                        <!--<div class="node node-brown"> </div>-->
                        <div class="node node-purple duration-1">padding-right (duration:0.2s)</div>
                        <div class="node node-blue duration-2">padding-right (duration:0.5s)</div>
                        <div class="node node-green duration-3">padding-right (duration:1s)</div>
                        <div class="node node-yellow duration-4">padding-right (duration:2s)</div>
                        <div class="node node-orange duration-5">padding-right (duration:3s)</div>
                        <!--<div class="node node-red duration-6">padding-right(0.2s)</div>-->
                    </div>
                </div>
                <pre class="prettyprint linenums sign">
                /*  改变持续时间为 1s  */
                -webkit-transition-duration: 1s;
                   -moz-transition-duration: 1s;
                    -ms-transition-duration: 1s;
                     -o-transition-duration: 1s;
                        transition-duration: 1s;</pre>
            </section>
            <section id="timeFunc">
            <header class="page-header">
                <h1>timing function</h1>
                <div class="explain">
                    <p>检索或设置对象中过渡的动画类型。</p>
                    <p>如果提供多个属性值，以逗号进行分隔。</p>
                    <p>对应的脚本特性为transitionTimingFunction。</p>
                    <p>默认值：ease。</p>
                </div>
                <div class="syntax"><p>transition-timing-function：linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(&lt;number&gt;, &lt;number&gt;, &lt;number&gt;, &lt;number&gt;)[ ,linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(&gt;number&lt;, &lt;number&gt;, &lt;number&gt;, &lt;number&gt;) ]*</p></div>
            </header>
                <div class="alert yellow">通过设置相同的<code>transition-duration, transition-delay</code>，观察不同<code>transition-timing-function</code>的效果。</div>
            <div class="example">
                <div class="transi transi-timeFunc node-duration">
                    <!--<div class="node node-brown"> </div>-->
                    <div class="node node-purple timeFunc-ease">padding-right (ease)</div>
                    <div class="node node-blue timeFunc-ease-in">padding-right (ease-in)</div>
                    <div class="node node-green timeFunc-ease-out">padding-right (ease-out)</div>
                    <div class="node node-yellow timeFunc-ease-in-out">padding-right (ease-in-out)</div>
                    <div class="node node-orange timeFunc-linear">padding-right (linear)</div>
                    <div class="node node-red timeFunc-bzr">padding-right cubic-bezier(0.2,0.6,0.8,0.4)</div>
                </div>
            </div>
                <pre class="prettyprint linenums sign">
 /*  等同于贝塞尔曲线cubic-bezier(0.25, 0.1, 0.25), (0.42, 0, 1.0, 1.0),<br>(0, 0, 0.58, 1.0)，(0.42, 0, 0.58, 1.0)，(0.0, 0.0, 1.0, 1.0)  */
 -webkit-transition-timing-function: ease, ease-in, ease-out, ease-in-out, linear;
   -moz-transition-timing-function: ease, ease-in, ease-out, ease-in-out, linear;
    -ms-transition-timing-function: ease, ease-in, ease-out, ease-in-out, linear;
     -o-transition-timing-function: ease, ease-in, ease-out, ease-in-out, linear;
        transition-timing-function: ease, ease-in, ease-out, ease-in-out, linear;
</pre>
        </section>
        <section id="delay">
            <header class="page-header">
                <h1>delay</h1>
                <div class="explain">
                    <p>检索或设置对象延迟过渡的时间。</p>
                    <p>如果提供多个属性值，以逗号进行分隔。</p>
                    <p>对应的脚本特性为transitionDelay。</p>
                    <p>默认值：0。</p>
                </div>
                <div class="syntax"><p>transition-delay：&lt;time&gt;[ ,&lt;time&gt; ]*</p></div>
            </header>
            <div class="alert yellow">通过设置相同的<code>transition-timing-function, transition-duration</code>，观察不同<code>transition-delay</code>的效果。</div>
            <div class="example">
                <div class="transi transi-delay  node-duration">
                    <!--<div class="node node-brown"> </div>-->
                    <div class="node node-purple delay-1">top (delay:0.2s)</div>
                    <div class="node node-blue delay-2">top (delay:0.5s)</div>
                    <div class="node node-green delay-3">top (delay:1s)</div>
                    <div class="node node-yellow delay-4">top (delay:2s)</div>
                    <div class="node node-orange delay-5">top (delay:3s)</div>

            </div>
            </div>
            <pre class="prettyprint linenums sign">
            /*  设置延迟过渡的时间为 .5s  */
            -webkit-transition-delay: .5s;
               -moz-transition-delay: .5s;
                -ms-transition-delay: .5s;
                 -o-transition-delay: .5s;
                    transition-delay: .5s;</pre>
        </section>
        <section id="propertySupport">
            <header class="page-header">
                <h1>Property Support</h1>
                <div class="explain">
                    <p>以下表格中的属性支持设置 <code>Transition</code>。</p>
                </div>
            </header>
            <table class="table table-striped table-bordered">
            <tbody>
            <tr>
                <th>Property Name</th>
                <th>Type</th>
            </tr>
            <tr>
                <td><code>background-color</code></td>
                <td>color</td>
            </tr>
            <tr>
                <td><code>background-image</code></td>
                <td>only gradients</td>
            </tr>
            <tr>
                <td><code>background-position</code></td>
                <td>percentage, length</td>
            </tr>
            <tr>
                <td><code>border-bottom-color</code></td>
                <td>color</td>
            </tr>
            <tr>
                <td><code>border-bottom-width</code></td>
                <td>length</td>
            </tr>
            <tr>
                <td><code>border-color</code></td>
                <td>color</td>
            </tr>
            <tr>
                <td><code>border-left-color</code></td>
                <td>color</td>
            </tr>
            <tr>
                <td><code>border-left-width</code></td>
                <td>length</td>
            </tr>
            <tr>
                <td><code>border-right-color</code></td>
                <td>color</td>
            </tr>
            <tr>
                <td><code>border-right-width</code></td>
                <td>length</td>
            </tr>
            <tr>
                <td><code>border-spacing</code></td>
                <td>length</td>
            </tr>
            <tr>
                <td><code>border-top-color</code></td>
                <td>color</td>
            </tr>
            <tr>
                <td><code>border-top-width</code></td>
                <td>length</td>
            </tr>
            <tr>
                <td><code>border-width</code></td>
                <td>length</td>
            </tr>
            <tr>
                <td><code>bottom</code></td>
                <td>length, percentage</td>
            </tr>
            <tr>
                <td><code>color</code></td>
                <td>color</td>
            </tr>
            <tr>
                <td><code>crop</code></td>
                <td>rectangle</td>
            </tr>
            <tr>
                <td><code>font-size</code></td>
                <td>length, percentage</td>
            </tr>
            <tr>
                <td><code>font-weight</code></td>
                <td>number</td>
            </tr>
            <tr>
                <td><code>grid-*</code></td>
                <td>various</td>
            </tr>
            <tr>
                <td><code>height</code></td>
                <td>length, percentage</td>
            </tr>
            <tr>
                <td><code>left</code></td>
                <td>length, percentage</td>
            </tr>
            <tr>
                <td><code>letter-spacing</code></td>
                <td>length</td>
            </tr>
            <tr>
                <td><code>line-height</code></td>
                <td>number, length, percentage</td>
            </tr>
            <tr>
                <td><code>margin-bottom</code></td>
                <td>length</td>
            </tr>
            <tr>
                <td><code>margin-left</code></td>
                <td>length</td>
            </tr>
            <tr>
                <td><code>margin-right</code></td>
                <td>length</td>
            </tr>
            <tr>
                <td><code>margin-top</code></td>
                <td>length</td>
            </tr>
            <tr>
                <td><code>max-height</code></td>
                <td>length, percentage</td>
            </tr>
            <tr>
                <td><code>max-width</code></td>
                <td>length, percentage</td>
            </tr>
            <tr>
                <td><code>min-height</code></td>
                <td>length, percentage</td>
            </tr>
            <tr>
                <td><code>min-width</code></td>
                <td>length, percentage</td>
            </tr>
            <tr>
                <td><code>opacity</code></td>
                <td>number</td>
            </tr>
            <tr>
                <td><code>outline-color</code></td>
                <td>color</td>
            </tr>
            <tr>
                <td><code>outline-offset</code></td>
                <td>integer</td>
            </tr>
            <tr>
                <td><code>outline-width</code></td>
                <td>length</td>
            </tr>
            <tr>
                <td><code>padding-bottom</code></td>
                <td>length</td>
            </tr>
            <tr>
                <td><code>padding-left</code></td>
                <td>length</td>
            </tr>
            <tr>
                <td><code>padding-right</code></td>
                <td>length</td>
            </tr>
            <tr>
                <td><code>padding-top</code></td>
                <td>length</td>
            </tr>
            <tr>
                <td><code>right</code></td>
                <td>length, percentage</td>
            </tr>
            <tr>
                <td><code>text-indent</code></td>
                <td>length, percentage</td>
            </tr>
            <tr>
                <td><code>text-shadow</code></td>
                <td>shadow</td>
            </tr>
            <tr>
                <td><code>top</code></td>
                <td>length, percentage</td>
            </tr>
            <tr>
                <td><code>vertical-align</code></td>
                <td>keywords, length, percentage</td>
            </tr>
            <tr>
                <td><code>visibility</code></td>
                <td>visibility</td>
            </tr>
            <tr>
                <td><code>width</code></td>
                <td>length, percentage</td>
            </tr>
            <tr>
                <td><code>word-spacing</code></td>
                <td>length, percentage</td>
            </tr>
            <tr>
                <td><code>z-index</code></td>
                <td>integer</td>
            </tr>
            <tr>
                <td><code>zoom</code></td>
                <td>number</td>
            </tr>
            </tbody>
            </table>
        </section>

        </article>
    </div>
</div>
<footer class="footer">
    <div class="inner">Copyright © myspace-nicolesite.rhcloud.com All Rights Reserved.
        <a href="http://weibo.com/magicdemo">@Ning_Wong</a>
    </div>
</footer>

<!-- javascript -->
<script src="../../lib/js/jquery-1.9.0.min.js"></script>
<script src="js/affix.js"></script>
<script src="js/google-code-prettify.js"></script>
<script type="text/javascript">
    (function($){
        window.prettyPrint && prettyPrint();
    })(window.jQuery)
</script>

</body>
</html>